var hide = {};

hide.init = function() {
  hide.selectColor($('#getHtml .no-1'), 1);
  hide.inputValue();
  hide.addElement();
  hide.selectDelete($('#getHtml .no-1'), 1);
  hide.deleteElement();
  // hide.chooseElement();
  // hide.rdeleteElement();
};


hide.currentID = '';
hide.deleteID = '';
hide.sumValue = 1;

hide.toggle = function(t) {         
  if (t) {
    $('#div1').css('display', 'block');
    $('#div2').css('display', 'block');
  } else {
    $('#div1').css('display', 'none');
    $('#div2').css('display', 'none');
  }
};

hide.toggle2 = function(t) {         
  if (t) {
    $('#div1').css('display', 'block');
    $('#div3').css('display', 'block');
  } else {
    $('#div1').css('display', 'none');
    $('#div3').css('display', 'none');
  }
};

hide.addElement = function() {         
  var $gHtml = $('#getHtml');          
  var tmpHTML = $('#add-element-temp').html();  
  $('#nBtn').on('click', function() {  
    var num = $gHtml.find('.no').length + 1;
    hide.sumValue += 1;
    var tmpDOM = $('<div class="no no-'+num+'"></div>') 
    
    tmpDOM.append(tmpHTML);            
    $gHtml.append(tmpDOM);             
    
    hide.selectColor($gHtml.find('.no-' + num), num);
    hide.currentID = num; 
    $('#getHtml .no-' + hide.currentID).find('.nub').html(num);
    hide.selectDelete($gHtml.find('.no-' + num), num);
  });
};

hide.selectDelete = function(e,num) {         
  e.find('.delete').on('click', function() { 
    var delClass = $(this).closest('.no').attr('class').substring(3, 7);
    hide.deleteID = delClass;
    // hide.currentID = num;
    hide.toggle2(true);
  });
  $('#div3').find('li').on('click', function() {
    hide.toggle2(false);
  });
};


hide.deleteElement = function(){
  $('#div3').find('.green').on('click', function() {
    $('.' + hide.deleteID).remove();
    // $('#getHtml .no-' + hide.currentID).remove();
    var a = $('#getHtml').find('.no').length;
    var b = a + 1;
    $('#getHtml .no-' + b).attr("class",'no no-' + a);
    $('#getHtml .no-' + a).find('.nub').html(a);
    hide.currentID = '';
    hide.deleteID = '';
  });
};


hide.selectColor = function(e, num) {   
  e.find('.select-color').on('click', function() {
    hide.currentID = num;            
    hide.toggle(true);
  });
};

hide.inputValue = function() {
  $('#div2').find('li').on('click', function() {
    hide.setValue($(this).text());
  });
};


hide.setValue = function(value) {
  $('#getHtml .no-' + hide.currentID).find('.select-color').val(value);
  hide.toggle(false);
  hide.currentID = '';
};





window.onload = function() {
  hide.init();
}

